$rem-base: 30px;

$mediaArray: "only screen and (max-width: 359px)",
             "only screen and (min-width:360px) and (max-width:374px)",
             "only screen and (min-width:375px) and (max-width:399px)",
             "only screen and (min-width:400px) and (max-width:479px)",
             "only screen and (min-width:480px) and (max-width:539px)",
             "only screen and (min-width:540px) and (max-width:639px)",
             "only screen and (min-width:640px) and (max-width:719px)",
             "only screen and (min-width:720px)";

$ratioFor320:720/320;
$ratioFor360:720/360;
$ratioFor375:720/375;
$ratioFor400:720/400;
$ratioFor480:720/480;
$ratioFor540:720/540;
$ratioFor640:720/640;
$ratioFor720:720/720;

$htmSizeArray:  floor($rem-base/$ratioFor320),
                floor($rem-base/$ratioFor360),
                floor($rem-base/$ratioFor375),
                floor($rem-base/$ratioFor400),
                floor($rem-base/$ratioFor480),
                floor($rem-base/$ratioFor540),
                floor($rem-base/$ratioFor640),
                floor($rem-base/$ratioFor720);

// set responsive
@for $mediaIndex from 1 to length($mediaArray) + 1 {
    $media: nth($mediaArray, $mediaIndex);
    $htmlFz: nth($htmSizeArray, $mediaIndex);
    @media #{$media}
    {
        html {
            font-size: $htmlFz;
        }
    }
}